<script setup lang="ts">
import {useRoleViewStore} from "@/store/views/sys/admin/roleStore";
import {storeToRefs} from "pinia";
import {commonFormat} from "@/utils/format-table";
import {Perm} from "@/utils/enum-type";

const store = useRoleViewStore()
const {openEdit, openAdd, getList, sortTable, openMenuTree, openDelete} = store

const {queryData, total, tableData, statusOptions} = storeToRefs(store)

watch([() => queryData.value.pageSize, () => queryData.value.currentPage], async () => {
  await getList()
})
// 载入查询
onMounted(async () => {
  await getList()
})
</script>

<template>
  <!-- 表格 -->
  <x-card>
    <div v-perm="Perm.SysRoleAdd">
      <!--    新增按钮-->
      <el-button type="success" @click="openAdd()">
        <i-ep-plus/>
        <span>新增</span>
      </el-button>
      <el-divider/>
    </div>
    <el-table :data="tableData" style="width: 100%" show-overflow-tooltip @sort-change="sortTable">
      <el-table-column fixed prop="id" label="id" width="80" sortable="custom"/>
      <el-table-column prop="name" label="角色名" min-width="150" sortable="custom"/>
      <el-table-column prop="code" label="编码" min-width="150" sortable="custom"/>
      <el-table-column prop="remark" label="描述" min-width="300" :show-overflow-tooltip="false">
        <template #default="{row}">
          <el-input type="textarea" autosize readonly :model-value="row.remark"/>
        </template>
      </el-table-column>
      <el-table-column prop="sort" label="排序" min-width="60" align="center" sortable="custom"/>
      <el-table-column prop="status" label="状态" min-width="60">
        <template #default="{row}">
          <x-tag :value="row.status">{{ commonFormat(row.status, statusOptions) }}</x-tag>
        </template>
      </el-table-column>
      <el-table-column
          v-perm="[[Perm.SysRoleSetMenus],[Perm.SysRoleEdit],[Perm.SysRoleDelete]]" fixed="right" label="操作"
          min-width="200" :show-overflow-tooltip="false">
        <template #default="{row}">
          <el-button v-perm="Perm.SysRoleSetMenus" link type="primary" size="small" @click="openMenuTree(row.id)">
            <i-ep-edit/>
            <span>分配菜单</span>
          </el-button>
          <el-button v-perm="Perm.SysRoleEdit" link type="primary" size="small" @click="openEdit(row.id)">
            <i-ep-edit/>
            <span>编辑</span>
          </el-button>
          <el-button v-perm="Perm.SysRoleDelete" link type="danger" size="small" @click="openDelete(row.id)">
            <i-ep-delete/>
            <span>删除</span>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </x-card>
  <x-card body-style="padding:0.75em;padding-right:2em">
    <XPagination
        v-model:page-size="queryData.pageSize"
        v-model:current-page="queryData.currentPage"
        v-model:total="total"
    />
  </x-card>
</template>